<template>
  <div id="user">
    <section class="jarallax py-5">
      <img src="@/assets/images/banner-1.jpg" class="jarallax-img">
      <div class="hero-content py-0 py-md-5">
        <div class="container-lg d-flex flex-column d-md-block align-items-center">
          <nav class="breadcrumb">
            <a class="breadcrumb-item nav-link" href="/Organic/home">主页</a>
            <a class="breadcrumb-item nav-link" href="/Organic/user">页面</a>
            <span class="breadcrumb-item active" aria-current="page">我的</span>
          </nav>
          <h1>个人中心</h1>
        </div>
      </div>
    </section>

    <section class="py-5">
      <div class="container-lg">
        <div class="row g-5">

          <el-card class="box-card">
            <el-row>
              <el-col :span="24">
                <el-tabs type="border-card">
                  <el-tab-pane>
                    <span slot="label"><i class="el-icon-menu"></i> 仪表盘</span>
                    <div class="dashboard-container">
                      <div class="greeting">
                        <h3>你好, {{user.nickName}}</h3>
                        <h1>欢迎来到您的个人资料</h1>
                      </div>

                      <el-row :gutter="20" class="stats-cards">
                        <el-col :span="8">
                          <el-card class="stats-card new-orders" body-style="padding: 20px;" >
                            <div class="card-icon">
                              <i class="el-icon-shopping-cart-2"></i>
                            </div>
                            <div class="card-content" @click="handleMerchantAction">
                              <div class="card-title">待完成订单</div>
                              <div class="card-value">{{merchantOrderCount}}</div>
                            </div>
                          </el-card>
                        </el-col>

                        <el-col :span="8">
                          <el-card class="stats-card deliveries" body-style="padding: 20px;" >
                            <div class="card-icon">
                              <i class="el-icon-truck"></i>
                            </div>
                            <div class="card-content" @click="handleSupplierAction">
                              <div class="card-title">待交货订单</div>
                              <div class="card-value">{{supplierOrderCount}}</div>
                            </div>
                          </el-card>
                        </el-col>

                        <el-col :span="8">
                          <el-card class="stats-card support-tickets" body-style="padding: 20px;">
                            <div class="card-icon">
                              <i class="el-icon-s-custom"></i>
                            </div>
                            <div class="card-content">
                              <div class="card-title">余额</div>
                              <div class="card-value">{{user.balance}}</div>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="info-card-container">
                      <el-card class="info-card" >
                        <div class="card-header">
                          <h2>个人信息</h2>
                        </div>
                        <el-row :gutter="20">
                          <el-col :span="6">
                            <div class="label">名字:</div>
                          </el-col>
                          <el-col :span="18">
                            <div class="value">{{user.nickName}}</div>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="6">
                            <div class="label">性别:</div>
                          </el-col>
                          <el-col :span="18">
                            <div class="value">{{user.sex}}</div>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="6">
                            <div class="label">电话:</div>
                          </el-col>
                          <el-col :span="18">
                            <div class="value">{{user.phone}}</div>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="6">
                            <div class="label">默认住址:</div>
                          </el-col>
                          <el-col :span="18">
                            <div >
                              {{getAddress(user)}}
                            </div>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="6">
                            <div class="label">生日:</div>
                          </el-col>
                          <el-col :span="18">
                            <div class="value">{{user.birth}}</div>
                          </el-col>
                        </el-row>
                      </el-card>

                      <el-card class="info-card">
                        <div class="card-header">
                          <h2>店铺信息</h2>
                        </div>
                        <div v-if="merchantTag==='S001-1'">
                          <el-button style="margin: 10% 35%" type="primary" @click="handleMerchantAction">申请成为商家</el-button>
                         <el-row :gutter="20"></el-row>
                        </div>
                        <div v-if="merchantTag==='S001-2'">
                          <el-button style="margin: 10% 35%" type="primary" :loading="true" >正在审核中</el-button>
                        </div>
                        <div v-if="merchantTag==='S001-3'">
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">名称:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{merchant.shopName}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">电话:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{merchant.phone}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">城市:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{merchant.address}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">门店地址:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">
                                {{merchant.detailAddress != undefined && merchant.detailAddress != null ? merchant.detailAddress : '未设置'}}
                              </div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">店长:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{merchant.name}}</div>
                            </el-col>
                          </el-row>
                          <button class="w-100 btn btn-primary btn-lg" type="button" @click="handleMerchantAction">前往我的店铺</button>
                        </div>
                      </el-card>

                      <el-card class="info-card">
                        <div class="card-header">
                          <h2>供应商信息</h2>
                        </div>
                        <div v-if="supplierTag==='S001-1'">
                          <el-button style="margin: 10% 35%" type="primary" @click="handleSupplierAction">申请成为供应商</el-button>
                          <el-row :gutter="20"></el-row>
                        </div>
                        <div v-if="supplierTag==='S001-2'">
                          <el-button style="margin: 10% 35%" type="primary" :loading="true" >正在审核中</el-button>
                        </div>
                        <div v-if="supplierTag==='S001-3'">
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">公司名称:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{supplier.companyName}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">电话:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{supplier.phone}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="8">
                              <div class="label">法定代表人:</div>
                            </el-col>
                            <el-col :span="16">
                              <div class="value">{{supplier.name}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">所属:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{supplier.address}}</div>
                            </el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="label">门店地址:</div>
                            </el-col>
                            <el-col :span="18">
                              <div class="value">{{supplier.detailAddress}}</div>
                            </el-col>
                          </el-row>
                          <button class="w-100 btn btn-primary btn-lg" type="button" @click="handleSupplierAction">管理我的商品</button>
                        </div>
                      </el-card>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-user-solid"></i> 个人信息</span>
                    <el-card v-if="updateUser" class="box-card" style="width: 100%;height: 100%">
                      <div slot="header">
                        <el-row :gutter="20">
                          <el-col :span="20">
                            <div class="grid-content bg-purple">
                              <el-avatar :size="90" :src="'http://localhost:90'+user.avatarImg" @error="errorHandler"  style="margin: 0 auto">
                                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                              </el-avatar>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                      <el-descriptions class="margin-top" title="个人详情" :column="2"  border>
                        <template slot="extra">
                          <el-button type="primary" size="small" @click="updateUser = false">更新</el-button>
                        </template>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-user"></i>
                            昵称
                          </template>
                          {{user.nickName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-user-solid"></i>
                            用户名
                          </template>
                          {{user.loginName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                          </template>
                          {{user.phone}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            余额
                          </template>
                          {{user.balance}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-s-custom"></i>
                            真实姓名
                          </template>
                          {{user.realName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-s-custom"></i>
                            性别
                          </template>
                          {{user.sex === 'male'? '男' : '女'}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-s-shop"></i>
                            是否为商户
                          </template>
                          {{ user.merchantTag === 'S001-1' ? '否' : '是' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-s-shop"></i>
                            是否为供货商
                          </template>
                          {{ user.supplierTag === 'S001-1' ? '否' : '是' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-date"></i>
                            生日
                          </template>
                          {{user.birth}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            生活地址
                          </template>
                          {{getAddress(user)}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-tickets"></i>
                            个人简介
                          </template>
                          {{user.introduce}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            详细地址
                          </template>
                          {{getDetailAddress(user)}}
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-card>
                    <el-card v-if="!updateUser" class="box-card" style="width: 100%;height: 100%">
                      <div slot="header">
                        <el-row :gutter="20">
                          <el-col :span="20">
                            <el-upload
                                class="avatar-uploader"
                                ref="upload"
                                action="#"
                                :auto-upload="false"
                                :show-file-list="false"
                                @click.native.prevent> <!-- 阻止默认点击行为 -->
                              <div class="grid-content bg-purple">
                                <el-avatar slot="trigger" :size="90" :src="img" @error="errorHandler" @click.native="handleAvatarClick" style="margin: 0 auto">
                                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                                </el-avatar>
                              </div>
                            </el-upload>
                            <input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
                          </el-col>
                        </el-row>
                      </div>
                      <el-form ref="form" :model="userForm" :rules="rules" label-width="100px">
                        <el-form-item label="昵称" prop="nickName">
                          <el-input v-model="userForm.nickName"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                          <el-input v-model="userForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="真实姓名" prop="realName">
                          <el-input v-model="userForm.realName"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                          <el-radio-group v-model="userForm.sex">
                            <el-radio label="male">男</el-radio>
                            <el-radio label="female">女</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="birth">
                          <el-date-picker
                            v-model="userForm.birth"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </el-form-item>
<!--                        <el-form-item label="地址" prop="Addr">-->
<!--                          <el-input v-model="userForm.Addr"></el-input>-->
<!--                          <el-button type="primary" @click="handleAddress">选择地址</el-button>-->
<!--                        </el-form-item>-->
                        <el-form-item label="个人介绍" prop="introduce">
                          <el-input type="textarea" v-model="userForm.introduce"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="updateUser=true">取消</el-button>
                          <el-button type="primary" @click="submitUpload">更新</el-button>
                          <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                      </el-form>
                    </el-card>
                    <el-dialog title="地址" :visible.sync="showAddressDialog" width="80%" >
                      <div style="height: 450px">
                        <Map ref="map" @updateLocation="updateLocation" />
                      </div>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="showAddressDialog = false">取 消</el-button>
                        <el-button type="primary" @click="setMapAddrToAddress">确 定</el-button>
                      </span>
                    </el-dialog>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-menu"></i> 我的订单</span>
                    <UserOrder/>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-menu"></i> 愿望清单</span>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-menu"></i> 地址</span>
                    <update-address/>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-menu"></i> 评论</span>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-menu"></i> 更改密码</span>
                    <update-pass-word/>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label"><i class="el-icon-menu"></i> 退出登录</span>
                    <sign-out/>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-card>

        </div>
      </div>
    </section>
  </div>
</template>

<script >
import Map from "@/components/OrganicBody/AMapSearch.vue";
import UserOrder from "@/components/OrganicBody/User-children/UserOrder.vue";
import SignOut from "@/components/OrganicBody/User-children/SignOut.vue";
import UpdatePassWord from "@/components/OrganicBody/User-children/UpdatePassWord.vue";
import UpdateAddress from "@/components/OrganicBody/User-children/UpdateAddress.vue";

export default {
  name: 'UserBody',
  components: {
    UpdateAddress,
    UpdatePassWord,
    SignOut,
    UserOrder,
    Map
  },
  props: {},
  data () {
    return {
      fileList: [],
      user:{userAddress:[]},
      userForm: {
        nickName: '',
        phone: '',
        realName: '',
        sex: '',
        birth: '',
        address: '',
        detailAddress: '',
        Addr:'',
        introduce: '',
      },
      showAddressDialog: false,
      updateUser:true,
      userName:'',
      password:'',
      img: '',
      rules: {
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 15, message: '昵称长度应在2到15个字符之间', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '真实姓名长度应在2到10个字符之间', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birth: [
          { required: true, message: '请选择出生日期', trigger: 'change' },
          { type: 'date', message: '请输入有效的日期', trigger: 'change' }
        ],
        Addr: [
          { required: true, message: '请输入住址信息', trigger: 'blur' },
        ],
        introduce: [
          { max: 200, message: '个人介绍不能超过200个字符', trigger: 'blur' }
        ]
      },
      MapAddr: '',
      merchantTag: "S001-1",
      merchant: {},
      supplierTag: "S001-1",
      supplier: {},
      merchantOrderCount: 0,
      supplierOrderCount: 0,
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    intUser(){
      this.user=this.$store.state.user;
      this.$axios.get('http://localhost:8090/consumer/getUserById?consumerId=' + this.user.consumerId).then(({ data }) => {
        if(data !== null && data !== undefined ){
          this.user = {};
          this.user = data;
          this.$store.commit('initUser', {})
          this.$store.commit('initUser', this.user)
        }
      })
    },
    initMerchant(){
      if(this.user.merchantTag === "S001-3"){
        this.$axios.get('http://localhost:8090/merchant/getMerchantByConsumerId?consumerId=' + this.user.consumerId).then(({ data }) => {
          if(data !== null && data !== undefined ){
            this.merchant = data;
            this.$store.commit('initMerchant', {})
            this.$store.commit('initMerchant', this.merchant)
            this.merchantTag = "S001-3";
            this.$axios.get('http://localhost:8090/orders/getMerchantOrderCountByMerchantId?merchantId=' + this.merchant.merchantId).then(({ data }) => {
              if(data !== null && data !== undefined ){
                this.merchantOrderCount = data;
              }
            })
          }
        })
        // eslint-disable-next-line no-empty
      }else if (this.user.merchantTag === "S001-2"){
        this.merchant = {};
        this.$store.commit('initMerchant', {})
        this.merchantTag = "S001-2";
      }else {
        this.merchant = {};
        this.$store.commit('initMerchant', {})
        this.merchantTag = "S001-1";
      }
      console.log(this.$store.state.merchant)
    },
    initSupplier(){
      if(this.user.supplierTag === "S001-3"){
        this.$axios.get('http://localhost:8090/supplier/getSupplierByConsumerId?consumerId=' + this.user.consumerId).then(({ data }) => {
          if(data !== null && data !== undefined ){
            this.supplier = data;
            this.$store.commit('initSupplier', {})
            this.$store.commit('initSupplier', this.supplier)
            this.supplierTag = "S001-3";
            this.$axios.get('http://localhost:8090/purchase-order/getSupplierOrderCountBySupplierId?supplierId=' + this.supplier.supplierId).then(({ data }) => {
              if(data !== null && data !== undefined ){
                this.supplierOrderCount = data;
              }
            })
          }
        })
      }else if (this.user.supplierTag === "S001-2"){
        this.supplier = {};
        this.$store.commit('initSupplier', {})
        this.supplierTag = "S001-2";
      }else {
        this.supplier = {};
        this.$store.commit('initSupplier', {})
        this.supplierTag = "S001-1";
      }
    },
    handleAddress(){
      this.showAddressDialog = true;
    },
    setMapAddrToAddress(){
      let address = this.MapAddr.province+'-'+this.MapAddr.city+'-'+this.MapAddr.district;
      let detailAddress = this.MapAddr.orgAddr;
      this.userForm.address = address;
      this.userForm.detailAddress = detailAddress;
      this.userForm.Addr=address+'-'+detailAddress;
      this.showAddressDialog = false;
    },
    // 点击地图后得到位置信息
    updateLocation(Addr) {
      this.MapAddr = Addr;
    },
    errorHandler() {
      return true;
    },
    handleAvatarClick() {
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt500KB = file.size / 1024 < 500;

        if (!isJPGOrPNG) {
          this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
          return;
        }
        if (!isLt500KB) {
          this.$message.error('上传图片大小不能超过 500KB!');
          return;
        }

        this.img = URL.createObjectURL(file);
        this.fileList = [{ name: file.name, url: this.img, raw: file }];
      }
    },
    submitUpload() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.fileList.length === 0) {
            this.$message.error('请上传头像图片');
            return;
          }

          let formData = new FormData();
          formData.append('consumerId', this.user.consumerId);
          formData.append('nickName', this.userForm.nickName);
          formData.append('phone', this.userForm.phone);
          formData.append('realName', this.userForm.realName);
          formData.append('sex', this.userForm.sex);
          formData.append('birth', this.userForm.birth);
          formData.append('address', this.userForm.address);
          formData.append('detailAddress', this.userForm.detailAddress);
          formData.append('introduce', this.userForm.introduce);

          this.fileList.forEach(file => {
            formData.append('files', file.raw);
          });

          this.$axios.post('http://localhost:8090/consumer/updateUser', formData).then(({ data }) => {
            if(data !== null && data !== undefined ){
              this.$notify({
                title: '更新成功',
                message: '更新个人信息成功！'+data.nickName,
                type: 'success'
              });
              this.intUser();
              this.updateUser = false;
            }
            console.log(data);
          }).catch(error => {
            // this.$message.error('注册失败，请稍后重试');
            this.$notify({
              title: '更新失败',
              message: '更新个人信息失败，请稍后重试',
              type: 'warning'
            });
            console.error(error);
          });
        } else {
          // this.$message.error('请检查表单输入是否正确');
          this.$notify({
            title: '更新失败',
            message: '请检查表单输入是否正确',
            type: 'warning'
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.img = '';
      this.fileList = [];
    },
    handleMerchantAction(){
      this.$router.push({ path: '/Organic/merchant' });
    },
    handleSupplierAction(){
      this.$router.push({ path: '/Organic/supplier' });
    },
    getAddress(obj){
      let address = '暂无'
      if(obj.userAddress.length>0){
        address = obj.userAddress[0].address
      }
      return address
    },
    getDetailAddress(obj){
      let address = '暂无'
      if(obj.userAddress.length>0){
        address = obj.userAddress[0].detailAddress
      }
      return address
    }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
  this.intUser();
  this.initMerchant();
  this.initSupplier();
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {}
}
</script>

<style scoped>
.box-card {
  margin: 3% auto;
  width: 85%;
}
.info-card-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.info-card {
  width: 48%;
  background-color: #f9f9f9;
}

.card-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.label {
  font-weight: bold;
  color: #666;
}

.value {
  color: #333;
}

@media (max-width: 768px) {
  .info-card-container {
    flex-direction: column;
  }

  .info-card {
    width: 100%;
  }
}



.dashboard-container {
  padding: 20px;
}

.greeting {
  margin-bottom: 30px;
}

.greeting h3 {
  color: #666;
  margin-bottom: 5px;
}

.greeting h1 {
  font-size: 24px;
  color: #333;
}

.stats-cards {
  display: flex;
  gap: 20px;
}

.stats-card {
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  transition: background-color 0.3s ease;
}



.new-orders ,.deliveries, .support-tickets {
  background-color: #333333;
  transition: hover 0.3s ease;
}

.new-orders:hover,.deliveries:hover, .support-tickets:hover {
  background-color: #4CAF50;
}

.card-icon {
  font-size: 40px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content {
  text-align: center;
}

.card-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.card-value {
  font-size: 36px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .stats-cards {
    flex-direction: column;
  }

  .stats-card {
    width: 100%;
    margin-bottom: 20px;
  }
}


.grid-content {
  text-align: center;
}
</style>
